<template>
  <div class="defect">
    <div class="defect__checks">
      <Check :title="'上线状态'" class="defect__checks__check" />
      <Check :title="'搭载方式'" class="defect__checks__check" />
      <Check :title="'缺陷类别'" class="defect__checks__check" />
      <Check :title="'一级类别'" class="defect__checks__check" />
      <Check :title="'二级类别'" class="defect__checks__check" />
      <Check :title="'三级类别'" class="defect__checks__check" />
      <Check :title="'缺陷名称'" class="defect__checks__check" />
      <Search class="defect__checks__search" />
      <Reset class="defect__checks__reset" />
    </div>
    <ul class="defect__list">
      <li class="defect__list__line defect__list__title">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">缺陷名称</span>
        <span class="defect__list__line__block">缺陷类别</span>
        <span class="defect__list__line__block">一级类别</span>
        <span class="defect__list__line__block">二级类别</span>
        <span class="defect__list__line__block">三级类别</span>
        <span class="defect__list__line__block">上线状态</span>
        <span class="defect__list__line__block">搭载方式</span>
        <span class="defect__list__line__block">缺陷说明</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
      <li class="defect__list__line defect__list__content">
        <span class="defect__list__line__block"
          ><input type="checkbox"
        /></span>
        <span class="defect__list__line__block">不支持连续对话</span>
        <span class="defect__list__line__block">设计缺陷</span>
        <span class="defect__list__line__block">语音交互</span>
        <span class="defect__list__line__block">自然交互</span>
        <span class="defect__list__line__block">连续对话能力</span>
        <span class="defect__list__line__block">新增</span>
        <span class="defect__list__line__block">OTA升级</span>
        <span class="defect__list__line__block">不支持语音聆听状态，上一条指令说完后，需要重新按键唤醒语音助手才可识别下一条指令，设计不够灵活与人性</span>
      </li>
    </ul>
    <el-pagination
      @current-change="next"
      background
      small
      layout="prev, pager, next"
      :total="100"
      class="defect__page"
      :current-page="1"
    />
  </div>
</template>
<script>
import Check from "@/components/Check.vue";
import Reset from "@/components/Reset.vue";
import Search from "@/components/Search.vue";
import ToDetail from "@/components/ToDetail.vue";
export default {
  components: { Check, Search, Reset, ToDetail },
  setup() {},
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
.defect {
  flex: 1;
  padding: 0 2.1rem;
  &__checks {
    &__check {
      margin-left: 3.2rem;
      margin-bottom: 1.9rem;
      &:first-child {
        margin-left: 0;
      }
      &:nth-child(6) {
        margin-left: 0;
      }
    }
    &__search {
      margin-left: 51rem;
    }
    &__reset {
      margin-left: 3.2rem;
    }
  }
  &__list {
    margin: 0 auto;
    margin-bottom: 0.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid $light-gray;
    li:nth-of-type(2n-1) {
      background-color: $light-gray;
    }
    &__title {
      font-weight: bolder;
    }
    //内容
    &__content {
      span {
        scale: 0.9;
      }
      span:nth-of-type(9) {
        overflow: scroll;
        text-align: left;
        line-height: 2.5rem;
      }
    }
    //通用
    &__line {
      display: flex;
      text-align: center;
      height: 5.9rem;
      line-height: 5.9rem;
      span::-webkit-scrollbar {
        display: none;
      }
      span:nth-of-type(1) {
        width: 5.2rem;
        scale: 1;
        input {
          position: relative;
          top: 0.3rem;
        }
      }
      span:nth-of-type(2) {
        width: 16.7rem;
      }
      span:nth-of-type(3) {
        width: 8.7rem;
      }
      span:nth-of-type(4) {
        width: 10.8rem;
      }
      span:nth-of-type(5) {
        width: 10rem;
      }
      span:nth-of-type(6) {
        width: 10.6rem;
      }
      span:nth-of-type(7) {
        width: 8.6rem;
      }
      span:nth-of-type(8) {
        width: 8.2rem;
      }
      span:nth-of-type(9) {
        flex: 1;
      }
    }
  }
  &__page {
    width: min-content;
    margin: 0 auto;
    margin-top: 4rem;
  }
}
</style>